* {
  padding: 0;
  margin: 0;
}

.banner {
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: transform 0.5s ease 0s;
}

.banner .carousel_list {
  width: 600%;
  overflow: hidden;
  transition: tansform 0.5s ease 0s;
}

.banner .carousel_list li {
  float: left;
  width: 16.666%;
  list-style: none;
}
.banner .carousel_list li img {
  width: 100%;
  /* 白边的处理 */
  vertical-align: middle;
}
.banner .center-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 1152px;
  left: 50%;
  margin-left: -576px;
  /* 这里的100%高度绝对不能省略，因为如果省略了，它的height就是0 */
  /* 那么它的子盒子设置16.6%就没有意义了 */
  height: 100%;
}

.banner .leftbtn {
  position: absolute;
  width: 57px;
  height: 162px;
  background: url(../images/index/icons-an.png) no-repeat 5px;
  background-size: 50px 50px;
  background-color: rgb(170, 159, 159);
  top: 450px;
  left: -240px;
  margin-top: -22px;
}

.banner .rightbtn {
  position: absolute;
  width: 57px;
  height: 162px;
  background: url(../images/index/icons-an.png) no-repeat 5px;
  background-size: 50px 50px;
  background-color: rgb(153, 147, 147);
  top: 450px;
  right: -240px;
  margin-top: -22px;
  transform: rotate(180deg);
}

.banner .circles {
  width: 160px;
  height: 20px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -75px;
  z-index: 10;
}
.banner .circles li {
  float: left;
  width: 20px;
  height: 20px;
  background-color: rgb(142, 160, 149);
  margin-right: 10px;
  border-radius: 10px;
  transition: all 0.5s ease 0s;
  /* 鼠标指针变为小手 */
  cursor: pointer;
  list-style: none;
}
.banner .circles li:last-child {
  margin-right: 0;
}
.banner .circles li.current {
  width: 40px;
  background-color: #303332;
}
